{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <button type="submit" form="form-product" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i></button>
        <a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    {% if master_id %}
      <div class="alert alert-warning"><i class="fa-solid fa-circle-exclamation"></i> {{ text_variant }}</div>
    {% endif %}
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-pencil"></i> {{ text_form }}</div>
      <div class="card-body">
        <form id="form-product" action="{{ save }}" method="post" data-oc-toggle="ajax">
          <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#tab-general" data-bs-toggle="tab" class="nav-link active">{{ tab_general }}</a></li>
            <li class="nav-item"><a href="#tab-data" data-bs-toggle="tab" class="nav-link">{{ tab_data }}</a></li>
            <li class="nav-item"><a href="#tab-links" data-bs-toggle="tab" class="nav-link">{{ tab_links }}</a></li>
            <li class="nav-item"><a href="#tab-attribute" data-bs-toggle="tab" class="nav-link">{{ tab_attribute }}</a></li>
            <li class="nav-item"><a href="#tab-option" data-bs-toggle="tab" class="nav-link">{{ tab_option }}</a></li>
            <li class="nav-item"><a href="#tab-subscription" data-bs-toggle="tab" class="nav-link">{{ tab_subscription }}</a></li>
            <li class="nav-item"><a href="#tab-discount" data-bs-toggle="tab" class="nav-link">{{ tab_discount }}</a></li>
            <li class="nav-item"><a href="#tab-image" data-bs-toggle="tab" class="nav-link">{{ tab_image }}</a></li>
            <li class="nav-item"><a href="#tab-reward" data-bs-toggle="tab" class="nav-link">{{ tab_reward }}</a></li>
            <li class="nav-item"><a href="#tab-seo" data-bs-toggle="tab" class="nav-link">{{ tab_seo }}</a></li>
            <li class="nav-item"><a href="#tab-design" data-bs-toggle="tab" class="nav-link">{{ tab_design }}</a></li>
            <li class="nav-item"><a href="#tab-report" data-bs-toggle="tab" class="nav-link">{{ tab_report }}</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab-general">
              <ul class="nav nav-tabs">
                {% for language in languages %}
                  <li class="nav-item"><a href="#language-{{ language.language_id }}" data-bs-toggle="tab" class="nav-link{% if loop.first %} active{% endif %}"><img src="{{ language.image }}" title="{{ language.name }}"/> {{ language.name }}</a></li>
                {% endfor %}
              </ul>
              <div class="tab-content">
                {% for language in languages %}
                  <div id="language-{{ language.language_id }}" class="tab-pane{% if loop.first %} active{% endif %}">
                    <fieldset>
                      <legend>{{ text_general }}</legend>
                      <div class="row mb-3">
                        <label for="input-name-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <input type="text" name="product_description[{{ language.language_id }}][name]" value="{{ product_description[language.language_id] ? product_description[language.language_id].name }}" placeholder="{{ entry_name }}" id="input-name-{{ language.language_id }}" class="form-control" required/>
                            {% if master_id %}
                              <div class="input-group-text">
                                <x-switch name="override[product_description][{{ language.language_id }}][name]" value="1" checked="{{ override.product_description[language.language_id].name }}" input-class="form-switch" data-oc-target="#input-name-{{ language.language_id }}"></x-switch>
                              </div>
                            {% endif %}
                          </div>
                          <div id="error-name-{{ language.language_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <label for="input-description-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_description }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <div class="form-control h-100 p-0 border-0 rounded-0">
                              <textarea name="product_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" id="input-description-{{ language.language_id }}" data-oc-toggle="ckeditor" data-lang="{{ ckeditor }}" class="w-100 position-relative">{{ product_description[language.language_id] ? product_description[language.language_id].description }}</textarea>
                            </div>
                            {% if master_id %}
                              <div class="input-group-text">
                                <x-switch name="override[product_description][{{ language.language_id }}][description]" value="1" checked="{{ override.product_description[language.language_id].description }}" input-class="form-switch" data-oc-target="#input-description-{{ language.language_id }}"></x-switch>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    </fieldset>
                    <fieldset>
                      <legend>{{ text_meta }}</legend>
                      <div class="row mb-3">
                        <label for="input-meta-title-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_meta_title }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <input type="text" name="product_description[{{ language.language_id }}][meta_title]" value="{{ product_description[language.language_id] ? product_description[language.language_id].meta_title }}" placeholder="{{ entry_meta_title }}" id="input-meta-title-{{ language.language_id }}" class="form-control" required/>
                            {% if master_id %}
                              <div class="input-group-text">
                                <x-switch name="override[product_description][{{ language.language_id }}][meta_title]" value="1" checked="{{ override.product_description[language.language_id].meta_title }}" input-class="form-switch" data-oc-target="#input-meta-title-{{ language.language_id }}"></x-switch>
                              </div>
                            {% endif %}
                          </div>
                          <div id="error-meta-title-{{ language.language_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <label for="input-meta-description-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_meta_description }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <textarea name="product_description[{{ language.language_id }}][meta_description]" rows="5" placeholder="{{ entry_meta_description }}" id="input-meta-description-{{ language.language_id }}" class="form-control">{{ product_description[language.language_id] ? product_description[language.language_id].meta_description }}</textarea>
                            {% if master_id %}
                              <div class="input-group-text">
                                <x-switch name="override[product_description][{{ language.language_id }}][meta_description]" value="1" checked="{{ override.product_description[language.language_id].meta_description }}" input-class="form-switch" data-oc-target="#input-meta-description-{{ language.language_id }}"></x-switch>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <label for="input-meta-keyword-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_meta_keyword }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <textarea name="product_description[{{ language.language_id }}][meta_keyword]" rows="5" placeholder="{{ entry_meta_keyword }}" id="input-meta-keyword-{{ language.language_id }}" class="form-control">{{ product_description[language.language_id] ? product_description[language.language_id].meta_keyword }}</textarea>
                            {% if master_id %}
                              <div class="input-group-text">
                                <x-switch name="override[product_description][{{ language.language_id }}][meta_keyword]" value="1" checked="{{ override.product_description[language.language_id].meta_keyword }}" input-class="form-switch" data-oc-target="#input-meta-keyword-{{ language.language_id }}"></x-switch>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <label for="input-tag-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_tag }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <input type="text" name="product_description[{{ language.language_id }}][tag]" value="{{ product_description[language.language_id] ? product_description[language.language_id].tag }}" placeholder="{{ entry_tag }}" id="input-tag-{{ language.language_id }}" class="form-control"/>
                            {% if master_id %}
                              <div class="input-group-text">
                                <x-switch name="override[product_description][{{ language.language_id }}][tag]" value="1" checked="{{ override.product_description[language.language_id].tag }}" input-class="form-switch" data-oc-target="#input-tag-{{ language.language_id }}"></x-switch>
                              </div>
                            {% endif %}
                          </div>
                          <div class="form-text">{{ help_tag }}</div>
                        </div>
                      </div>
                    </fieldset>
                  </div>
                {% endfor %}
              </div>
            </div>
            <div id="tab-data" class="tab-pane">
              <input type="hidden" name="master_id" value="{{ master_id }}"/>
              <fieldset>
                <legend>{{ text_model }}</legend>
                <div class="row mb-3">
                  <label for="input-model" class="col-sm-2 col-form-label">{{ entry_model }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="model" value="{{ model }}" placeholder="{{ entry_model }}" id="input-model" class="form-control" required/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[model]" value="1" checked="{{ override.model }}" input-class="form-switch" data-oc-target="#input-model"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                    <div id="error-model" class="invalid-feedback"></div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label">{{ entry_product_code }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select id="input-code" class="form-select">
                        {% for identifier in identifiers %}
                          <option value="{{ identifier.identifier_id }}">{{ identifier.code }}</option>
                        {% endfor %}
                      </select> <input type="text" value="" placeholder="{{ entry_product_code }}" id="input-value" class="form-control w-75"/>
                      <button type="button" id="button-code" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button>
                    </div>
                    <div class="input-group">
                      <div class="form-control p-0" style="height: 150px; overflow: auto;">
                        <table id="product-code" class="table m-0">
                          <tbody>
                            {% set code_row = 0 %}
                            {% for product_code in product_codes %}
                              <tr id="code-row-{{ code_row }}">
                                <td style="width: 1px;">{{ product_code.code }}<input type="hidden" name="product_code[{{ code_row }}][identifier_id]" value="{{ product_code.identifier_id }}"/></td>
                                <td>{{ product_code.value }}
                                  <div id="error-code-{{ code_row }}" class="invalid-feedback"></div>
                                  <input type="hidden" name="product_code[{{ code_row }}][value]" value="{{ product_code.value }}">
                                </td>
                                <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                              </tr>
                              {% set code_row = code_row + 1 %}
                            {% endfor %}
                          </tbody>
                        </table>
                      </div>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[product_code]" value="1" checked="{{ override.product_code }}" input-class="form-switch" data-oc-target="#input-code, #button-code, #product-code"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_product_code }}</div>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_price }}</legend>
                <div class="row mb-3">
                  <label for="input-price" class="col-sm-2 col-form-label">{{ entry_price }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="price" value="{{ price }}" placeholder="{{ entry_price }}" id="input-price" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[price]" value="1" checked="{{ override.price }}" input-class="form-switch" data-oc-target="#input-price"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-tax-class" class="col-sm-2 col-form-label">{{ entry_tax_class }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select name="tax_class_id" id="input-tax-class" class="form-select">
                        <option value="0">{{ text_none }}</option>
                        {% for tax_class in tax_classes %}
                          <option value="{{ tax_class.tax_class_id }}"{% if tax_class.tax_class_id == tax_class_id %} selected{% endif %}>{{ tax_class.title }}</option>
                        {% endfor %}
                      </select>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[tax_class_id]" value="1" checked="{{ override.tax_class_id }}" input-class="form-switch" data-oc-target="#input-tax-class"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_stock }}</legend>
                <div class="row mb-3">
                  <label for="input-quantity" class="col-sm-2 col-form-label">{{ entry_quantity }}</label>
                  <div class="col-sm-10">
                    <input type="text" name="quantity" value="{{ quantity }}" placeholder="{{ entry_quantity }}" id="input-quantity" class="form-control"/>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-minimum" class="col-sm-2 col-form-label">{{ entry_minimum }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="minimum" value="{{ minimum }}" placeholder="{{ entry_minimum }}" id="input-minimum" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[minimum]" value="1" checked="{{ override.minimum }}" input-class="form-switch" data-oc-target="#input-minimum"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_minimum }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label">{{ entry_subtract }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <x-switch name="subtract" value="1" checked="{{ subtract }}" input-id="input-subtract" input-class="form-switch form-switch-lg"></x-switch>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[subtract]" checked="{{ override.subtract }}" value="1" input-class="form-switch" data-oc-target="#input-subtract"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-stock-status" class="col-sm-2 col-form-label">{{ entry_stock_status }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select name="stock_status_id" id="input-stock-status" class="form-select">
                        {% for stock_status in stock_statuses %}
                          <option value="{{ stock_status.stock_status_id }}"{% if stock_status.stock_status_id == stock_status_id %} selected{% endif %}>{{ stock_status.name }}</option>
                        {% endfor %}
                      </select>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[stock_status_id]" value="1" checked="{{ override.stock_status_id }}" input-class="form-switch" data-oc-target="#input-stock-status"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_stock_status }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-location" class="col-sm-2 col-form-label">{{ entry_location }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="location" value="{{ location }}" placeholder="{{ entry_location }}" id="input-location" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[location]" value="1" checked="{{ override.location }}" input-class="form-switch" data-oc-target="#input-location"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-date-available" class="col-sm-2 col-form-label">{{ entry_date_available }}</label>
                  <div class="col-sm-10 col-md-4">
                    <div class="input-group">
                      <input type="date" name="date_available" value="{{ date_available }}" placeholder="{{ entry_date_available }}" id="input-date-available" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[date_available]" value="1" checked="{{ override.date_available }}" input-class="form-switch" data-oc-target="#input-date-available"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_specification }}</legend>
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label">{{ entry_shipping }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <x-switch name="shipping" value="1" checked="{{ shipping }}" input-id="input-shipping" input-class="form-switch form-switch-lg"></x-switch>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[shipping]" value="1" checked="{{ override.shipping }}" input-class="form-switch" data-oc-target="#input-shipping"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-length" class="col-sm-2 col-form-label">{{ entry_dimension }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="length" value="{{ length }}" placeholder="{{ entry_length }}" id="input-length" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[length]" value="1" checked="{{ override.length }}" input-class="form-switch" data-oc-target="#input-length"></x-switch>
                        </div>
                      {% endif %}
                      <input type="text" name="width" value="{{ width }}" placeholder="{{ entry_width }}" id="input-width" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[width]" value="1" checked="{{ override.width }}" input-class="form-switch" data-oc-target="#input-width"></x-switch>
                        </div>
                      {% endif %}
                      <input type="text" name="height" value="{{ height }}" placeholder="{{ entry_height }}" id="input-height" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[height]" value="1" checked="{{ override.height }}" input-class="form-switch" data-oc-target="#input-height"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-length-class" class="col-sm-2 col-form-label">{{ entry_length_class }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select name="length_class_id" id="input-length-class" class="form-select">
                        {% for length_class in length_classes %}
                          <option value="{{ length_class.length_class_id }}"{% if length_class.length_class_id == length_class_id %} selected{% endif %}>{{ length_class.title }}</option>
                        {% endfor %}
                      </select>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[length_class_id]" value="1" checked="{{ override.length_class_id }}" input-class="form-switch" data-oc-target="#input-length-class"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-weight" class="col-sm-2 col-form-label">{{ entry_weight }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="weight" value="{{ weight }}" placeholder="{{ entry_weight }}" id="input-weight" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[weight]" value="1" checked="{{ override.weight }}" input-class="form-switch" data-oc-target="#input-weight"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-weight-class" class="col-sm-2 col-form-label">{{ entry_weight_class }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select name="weight_class_id" id="input-weight-class" class="form-select">
                        {% for weight_class in weight_classes %}
                          <option value="{{ weight_class.weight_class_id }}"{% if weight_class.weight_class_id == weight_class_id %} selected{% endif %}>{{ weight_class.title }}</option>
                        {% endfor %}
                      </select>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[weight_class_id]" value="1" checked="{{ override.weight_class_id }}" input-class="form-switch" data-oc-target="#input-weight-class"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label">{{ entry_status }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <x-switch name="status" value="1" checked="{{ status }}" input-id="input-status" input-class="form-switch form-switch-lg"></x-switch>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[status]" value="1" checked="{{ override.status }}" input-class="form-switch" data-oc-target="#input-status"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-sort-order" class="col-sm-2 col-form-label">{{ entry_sort_order }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="number" name="sort_order" value="{{ sort_order }}" placeholder="{{ entry_sort_order }}" id="input-sort-order" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[sort_order]" value="1" checked="{{ override.sort_order }}" input-class="form-switch" data-oc-target="#input-sort-order"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
            <div id="tab-links" class="tab-pane">
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_manufacturer }}</label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <input type="text" name="manufacturer" value="{{ manufacturer }}" placeholder="{{ entry_manufacturer }}" id="input-manufacturer" data-oc-target="autocomplete-manufacturer" class="form-control" autocomplete="off"/>
                    {% if master_id %}
                      <div class="input-group-text">
                        <x-switch name="override[manufacturer]" value="1" checked="{{ override.manufacturer }}" input-class="form-switch" data-oc-target="#input-manufacturer"></x-switch>
                      </div>
                    {% endif %}
                  </div>
                  <input type="hidden" name="manufacturer_id" value="{{ manufacturer_id }}" id="input-manufacturer-id"/>
                  <ul id="autocomplete-manufacturer" class="dropdown-menu"></ul>
                  <div class="form-text">{{ help_manufacturer }}</div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_category }}</label>
                <div class="col-sm-10">
                  <input type="text" name="category" value="" placeholder="{{ entry_category }}" id="input-category" data-oc-target="autocomplete-category" class="form-control" autocomplete="off"/>
                  <ul id="autocomplete-category" class="dropdown-menu"></ul>
                  <div class="input-group">
                    <div class="form-control p-0" style="height: 150px; overflow: auto;">
                      <table id="product-category" class="table m-0">
                        <tbody>
                          {% for product_category in product_categories %}
                            <tr id="product-category-{{ product_category.category_id }}">
                              <td>{{ product_category.name }}<input type="hidden" name="product_category[]" value="{{ product_category.category_id }}"/></td>
                              <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <x-switch name="override[product_category]" value="1" checked="{{ override.product_category }}" input-class="form-switch" data-oc-target="#input-category, #product-category"></x-switch>
                      </div>
                    {% endif %}
                  </div>
                  <div class="form-text">{{ help_category }}</div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_filter }}</label>
                <div class="col-sm-10">
                  <input type="text" name="filter" value="" placeholder="{{ entry_filter }}" id="input-filter" data-oc-target="autocomplete-filter" class="form-control" autocomplete="off"/>
                  <ul id="autocomplete-filter" class="dropdown-menu"></ul>
                  <div class="input-group">
                    <div class="form-control p-0" style="height: 150px; overflow: auto;">
                      <table id="product-filter" class="table m-0">
                        <tbody>
                          {% for product_filter in product_filters %}
                            <tr id="product-filter-{{ product_filter.filter_id }}">
                              <td>{{ product_filter.name }}<input type="hidden" name="product_filter[]" value="{{ product_filter.filter_id }}"/></td>
                              <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <x-switch name="override[product_filter]" value="1" checked="{{ override.product_filter }}" input-class="form-switch" data-oc-target="#input-filter, #product-filter"></x-switch>
                      </div>
                    {% endif %}
                  </div>
                  <div class="form-text">{{ help_filter }}</div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_store }}</label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <div id="product-store" class="form-control" style="height: 150px; overflow: auto;">
                      {% for store in stores %}
                        <div class="form-check">
                          <input type="checkbox" name="product_store[]" value="{{ store.store_id }}" v id="input-store-{{ store.store_id }}" class="form-check-input"{% if store.store_id in product_store %} checked{% endif %}/> <label for="input-store-{{ store.store_id }}" class="form-check-label">{{ store.name }}</label>
                        </div>
                      {% endfor %}
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <x-switch name="override[product_store]" value="1" checked="{{ override.product_store }}" input-class="form-switch" data-oc-target="#product-store"></x-switch>
                      </div>
                    {% endif %}
                  </div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_download }}</label>
                <div class="col-sm-10">
                  <input type="text" name="download" value="" placeholder="{{ entry_download }}" id="input-download" data-oc-target="autocomplete-download" class="form-control" autocomplete="off"/>
                  <ul id="autocomplete-download" class="dropdown-menu"></ul>
                  <div class="input-group">
                    <div class="form-control p-0" style="height: 150px; overflow: auto;">
                      <table id="product-download" class="table m-0">
                        <tbody>
                          {% for product_download in product_downloads %}
                            <tr id="product-download-{{ product_download.download_id }}">
                              <td>{{ product_download.name }}<input type="hidden" name="product_download[]" value="{{ product_download.download_id }}"/></td>
                              <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <x-switch name="override[product_download]" value="1" checked="{{ override.product_download }}" input-class="form-switch" data-oc-target="#input-download, #product-download"></x-switch>
                      </div>
                    {% endif %}
                  </div>
                  <div class="form-text">{{ help_download }}</div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_related }}</label>
                <div class="col-sm-10">
                  <input type="text" name="related" value="" placeholder="{{ entry_related }}" id="input-related" data-oc-target="autocomplete-related" class="form-control" autocomplete="off"/>
                  <ul id="autocomplete-related" class="dropdown-menu"></ul>
                  <div class="input-group">
                    <div class="form-control p-0" style="height: 150px; overflow: auto;">
                      <table id="product-related" class="table m-0">
                        <tbody>
                          {% for product_related in product_relateds %}
                            <tr id="product-related-{{ product_related.product_id }}">
                              <td>{{ product_related.name }}<input type="hidden" name="product_related[]" value="{{ product_related.product_id }}"/></td>
                              <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <x-switch name="override[product_related]" value="1" checked="{{ override.product_related }}" input-class="form-switch" data-oc-target="#input-related, #product-related"></x-switch>
                      </div>
                    {% endif %}
                  </div>
                  <div class="form-text">{{ help_related }}</div>
                </div>
              </div>
            </div>
            <div id="tab-attribute" class="tab-pane">
              <div class="table-responsive">
                <table id="product-attribute" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>{{ entry_attribute }}</th>
                      <th>{{ entry_text }}</th>
                      <th>{% if master_id %}
                          <x-switch name="override[product_attribute]" value="1" checked="{{ override.product_attribute }}" input-class="form-switch float-end" data-oc-target="#product-attribute"></x-switch>{% endif %}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% set attribute_row = 0 %}
                    {% for product_attribute in product_attributes %}
                      <tr id="attribute-row-{{ attribute_row }}">
                        <td>
                          <input type="hidden" name="product_attribute[{{ attribute_row }}][attribute_id]" value="{{ product_attribute.attribute_id }}" id="input-attribute-id-{{ attribute_row }}"/> <input type="text" name="product_attribute[{{ attribute_row }}][name]" value="{{ product_attribute.name }}" placeholder="{{ entry_attribute }}" id="input-attribute-{{ attribute_row }}" data-oc-target="autocomplete-attribute-{{ attribute_row }}" class="form-control" autocomplete="new-password"/>
                          <ul id="autocomplete-attribute-{{ attribute_row }}" class="dropdown-menu"></ul>
                        </td>
                        <td>{% for language in languages %}
                            <div class="input-group mb-12">
                              <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name }}"/></div>
                              <textarea name="product_attribute[{{ attribute_row }}][product_attribute_description][{{ language.language_id }}][text]" rows="5" placeholder="{{ entry_text }}" id="input-text-{{ attribute_row }}-{{ language.language_id }}" class="form-control">{{ product_attribute.product_attribute_description[language.language_id] ? product_attribute.product_attribute_description[language.language_id].text }}</textarea>
                            </div>
                          {% endfor %}</td>
                        <td class="text-end"><button type="button" onclick="$('#attribute-row-{{ attribute_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                      </tr>
                      {% set attribute_row = attribute_row + 1 %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="2"></td>
                      <td class="text-end"><button type="button" id="button-attribute" data-bs-toggle="tooltip" title="{{ button_attribute_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
            {% if not master_id %}
              <div id="tab-option" class="tab-pane">

                <div id="option">

                  {% set option_row = 0 %}
                  {% set option_value_row = 0 %}
                  {% for product_option in product_options %}

                    <fieldset id="option-row-{{ option_row }}">
                      <legend>{{ product_option.name }}</legend>
                      <input type="hidden" name="product_option[{{ option_row }}][product_option_id]" value="{{ product_option.product_option_id }}"/> <input type="hidden" name="product_option[{{ option_row }}][name]" value="{{ product_option.name }}"/> <input type="hidden" name="product_option[{{ option_row }}][option_id]" value="{{ product_option.option_id }}"/> <input type="hidden" name="product_option[{{ option_row }}][type]" value="{{ product_option.type }}"/>

                      <div class="row align-items-center">
                        <div class="col-11">

                          <div class="mb-3">
                            <label for="input-required-{{ option_row }}" class="form-label">{{ entry_required }}</label> <select name="product_option[{{ option_row }}][required]" id="input-required-{{ option_row }}" class="form-select">
                              <option value="1"{% if product_option.required %} selected{% endif %}>{{ text_enabled }}</option>
                              <option value="0"{% if not product_option.required %} selected{% endif %}>{{ text_disabled }}</option>
                            </select>
                          </div>

                          {% if product_option.type == 'text' %}
                            <div class="mb-3">
                              <label for="input-option-{{ option_row }}" class="form-label">{{ entry_option_value }}</label> <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control"/>
                            </div>
                          {% endif %}

                          {% if product_option.type == 'textarea' %}
                            <div class="mb-3">
                              <label for="input-option-{{ option_row }}" class="form-label">{{ entry_option_value }}</label> <textarea name="product_option[{{ option_row }}][value]" rows="5" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control">{{ product_option.value }}</textarea>
                            </div>
                          {% endif %}

                          {% if product_option.type == 'file' %}
                            <div class="mb-3 d-none">
                              <label for="input-option-{{ option_row }}" class="form-label">{{ entry_option_value }}</label> <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control"/>
                            </div>
                          {% endif %}

                          {% if product_option.type == 'date' %}
                            <div class="mb-3">
                              <label for="input-option-{{ option_row }}" class="form-label">{{ entry_option_value }}</label> <input type="date" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control"/>
                            </div>
                          {% endif %}

                          {% if product_option.type == 'time' %}
                            <div class="mb-3">
                              <label for="input-option-{{ option_row }}" class="form-label">{{ entry_option_value }}</label> <input type="time" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control"/>
                            </div>
                          {% endif %}

                          {% if product_option.type == 'datetime' %}
                            <div class="mb-3">
                              <label for="input-option-{{ option_row }}" class="form-label">{{ entry_option_value }}</label> <input type="datetime-local" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control"/>
                            </div>
                          {% endif %}

                          {% if product_option.type == 'select' or product_option.type == 'radio' or product_option.type == 'checkbox' or product_option.type == 'image' %}
                            <div class="table-responsive">
                              <table class="table table-bordered table-hover">
                                <thead>
                                  <tr>
                                    <th>{{ entry_option_value }}</th>
                                    <th class="text-end">{{ entry_quantity }}</th>
                                    <th>{{ entry_subtract }}</th>
                                    <th class="text-end">{{ entry_price }}</th>
                                    <th class="text-end">{{ entry_points }}</th>
                                    <th class="text-end">{{ entry_weight }}</th>
                                    <th></th>
                                  </tr>
                                </thead>
                                <tbody id="option-value-{{ option_row }}">
                                  {% for product_option_value in product_option.product_option_value %}
                                    <tr id="option-value-row-{{ option_value_row }}">
                                      <td>{{ product_option_value.name }}
                                        <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][option_value_id]" value="{{ product_option_value.option_value_id }}"/> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][product_option_value_id]" value="{{ product_option_value.product_option_value_id }}"/></td>
                                      <td class="text-end">{{ product_option_value.quantity }} <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][quantity]" value="{{ product_option_value.quantity }}"/></td>
                                      <td>{% if product_option_value.subtract %}
                                          {{ text_yes }}
                                        {% else %}
                                          {{ text_no }}
                                        {% endif %}
                                        <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][subtract]" value="{{ product_option_value.subtract }}"/></td>
                                      <td class="text-end">
                                        {{ product_option_value.price_prefix }}
                                        <x-currency code="{{ currency }}" amount="{{ product_option_value.price }}"></x-currency>
                                        <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][price_prefix]" value="{{ product_option_value.price_prefix }}"/> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][price]" value="{{ product_option_value.price }}"/>
                                      </td>
                                      <td class="text-end">{{ product_option_value.points_prefix }}{{ product_option_value.points }}
                                        <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][points_prefix]" value="{{ product_option_value.points_prefix }}"/> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][points]" value="{{ product_option_value.points }}"/></td>
                                      <td class="text-end">{{ product_option_value.weight_prefix }}{{ product_option_value.weight }}
                                        <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][weight_prefix]" value="{{ product_option_value.weight_prefix }}"/> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][weight]" value="{{ product_option_value.weight }}"/></td>
                                      <td class="text-end">
                                        <button type="button" data-bs-toggle="tooltip" title="{{ button_edit }}" data-option-row="{{ option_row }}" data-option-value-row="{{ option_value_row }}" class="btn btn-primary"><i class="fa-solid fa-pencil"></i></button>
                                        <button type="button" onclick="$('#option-value-row-{{ option_value_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button>
                                      </td>
                                    </tr>
                                    {% set option_value_row = option_value_row + 1 %}
                                  {% endfor %}
                                </tbody>
                                <tfoot>
                                  <tr>
                                    <td colspan="6"></td>
                                    <td class="text-end"><button type="button" data-bs-toggle="tooltip" title="{{ button_option_value_add }}" data-option-row="{{ option_row }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                                  </tr>
                                </tfoot>
                              </table>
                              <select id="product-option-values-{{ option_row }}" class="d-none">
                                {% if option_values[product_option.option_id] %}
                                  {% for option_value in option_values[product_option.option_id] %}
                                    <option value="{{ option_value.option_value_id }}">{{ option_value.name }}</option>
                                  {% endfor %}
                                {% endif %}
                              </select>
                            </div>
                          {% endif %}
                        </div>

                        <div class="col">
                          <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" title="{{ button_remove }}" onclick="$('#option-row-{{ option_row }}').remove();"><i class="fa-solid fa-minus-circle"></i></button>
                        </div>
                      </div>
                    </fieldset>
                    {% set option_row = option_row + 1 %}
                  {% endfor %}
                </div>
                <fieldset>
                  <legend class="float-none">{{ text_option_add }}</legend>
                  <div class="row mb-3">
                    <label for="input-option" class="col-sm-2 col-form-label">{{ entry_option }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="option" value="" placeholder="{{ entry_option }}" id="input-option" data-oc-target="autocomplete-option" class="form-control" autocomplete="off"/>
                      <ul id="autocomplete-option" class="dropdown-menu"></ul>
                      <div class="form-text">{{ help_option }}</div>
                    </div>
                  </div>
                </fieldset>
              </div>
            {% else %}
              <div id="tab-option" class="tab-pane">
                {% for option in options %}
                  <fieldset>
                    <legend class="float-none">{{ option.name }}</legend>

                    {% if option.type == 'select' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <select name="variant[{{ option.product_option_id }}]" id="input-option-{{ option.product_option_id }}" class="form-select">
                              <option value="">{{ text_select }}</option>
                              {% for option_value in option.product_option_value %}
                                <option value="{{ option_value.product_option_value_id }}"{% if variant[option.product_option_id] and option_value.product_option_value_id == variant[option.product_option_id] %} selected{% endif %}>{{ option_value.name }}
                                  {% if option_value.price %}
                                    ({{ option_value.price_prefix }}
                                    <x-currency code="{{ currency }}" amount="{{ option_value.price }}"></x-currency>
                                  {% endif %}</option>
                              {% endfor %}
                            </select>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#input-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'radio' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <div id="input-option-{{ option.product_option_id }}" class="form-control" style="height: 150px; overflow: auto;">
                              {% for option_value in option.product_option_value %}
                                <div class="form-check">
                                  <input type="radio" name="variant[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"{% if variant[option.product_option_id] and option_value.product_option_value_id == variant[option.product_option_id] %} checked{% endif %}/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">
                                    {% if option_value.image %}
                                      <img src="{{ option_value.image }}" alt="{{ option_value.name }}" class="img-thumbnail"/>{% endif %}
                                    {{ option_value.name }}
                                    {% if option_value.price %}
                                      ({{ option_value.price_prefix }}
                                      <x-currency code="{{ currency }}" amount="{{ option_value.price }}"></x-currency>)
                                    {% endif %}</label>
                                </div>
                              {% endfor %}
                            </div>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#input-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'checkbox' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <div id="input-option-{{ option.product_option_id }}" class="form-control" style="height: 150px; overflow: auto;">
                              {% for option_value in option.product_option_value %}
                                <div class="form-check">
                                  <input type="checkbox" name="variant[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"{% if variant[option.product_option_id] and option_value.product_option_value_id in variant[option.product_option_id] %} checked{% endif %}/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">
                                    {% if option_value.image %}
                                      <img src="{{ option_value.image }}" alt="{{ option_value.name }}" class="img-thumbnail"/>
                                    {% endif %}
                                    {{ option_value.name }}
                                    {% if option_value.price %}
                                      ({{ option_value.price_prefix }}
                                      <x-currency code="{{ currency }}" amount="{{ option_value.price }}"></x-currency>)
                                    {% endif %}</label>
                                </div>
                              {% endfor %}
                            </div>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#input-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'text' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <input type="text" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#input-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'textarea' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <textarea name="variant[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control">{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}</textarea>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#input-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'file' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <button type="button" data-oc-toggle="upload" data-oc-url="{{ upload }}" id="button-upload-{{ option.product_option_id }}" data-oc-target="#input-option-{{ option.product_option_id }}" data-oc-size-max="{{ config_file_max_size }}" data-oc-size-error="{{ error_upload_size }}" class="btn btn-primary"><i class="fa-solid fa-upload"></i> {{ button_upload }}</button>
                            <input type="text" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                            <button type="button" data-oc-toggle="download" data-oc-target="#input-option-{{ option.product_option_id }}"{% if not variant[option.product_option_id] %} disabled{% endif %} class="btn btn-outline-secondary"><i class="fa-solid fa-download"></i> {{ button_download }}</button>
                            <button type="button" data-oc-toggle="clear" data-bs-toggle="tooltip" title="{{ button_clear }}" data-oc-target="#input-option-{{ option.product_option_id }}"{% if not variant[option.product_option_id] %} disabled{% endif %} class="btn btn-outline-danger"><i class="fa-solid fa-eraser"></i></button>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#button-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'date' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10 col-md-4">
                          <div class="input-group">
                            <input type="date" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#input-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'time' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10 col-md-4">
                          <div id="input-option-{{ option.product_option_id }}" class="input-group">
                            <input type="time" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" class="form-control"/>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#input-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'datetime' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10 col-md-4">
                          <div class="input-group">
                            <input type="datetime-local" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                            <div class="input-group-text">
                              <x-switch name="override[variant][{{ option.product_option_id }}]" value="1" checked="{{ override.variant[option.product_option_id] }}" input-class="form-switch" data-oc-target="#input-option-{{ option.product_option_id }}"></x-switch>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}
                  </fieldset>
                {% endfor %}
              </div>
            {% endif %}
            <div id="tab-subscription" class="tab-pane">
              <div class="table-responsive">
                <table id="product-subscription" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>{{ entry_subscription }}</th>
                      <th>{{ entry_customer_group }}</th>
                      <th>{{ entry_trial_price }}</th>
                      <th>{{ entry_price }}</th>
                      <th>{% if master_id %}
                          <x-switch name="override[product_subscription]" value="1" checked="{{ override.product_subscription }}" input-class="form-switch float-end" data-oc-target="#product-subscription"></x-switch>{% endif %}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% set subscription_row = 0 %}
                    {% for product_subscription in product_subscriptions %}
                      <tr id="subscription-row-{{ subscription_row }}">
                        <td><select name="product_subscription[{{ subscription_row }}][subscription_plan_id]" class="form-select">
                            {% for subscription_plan in subscription_plans %}
                              <option value="{{ subscription_plan.subscription_plan_id }}"{% if subscription_plan.subscription_plan_id == product_subscription.subscription_plan_id %} selected{% endif %}>{{ subscription_plan.name }}</option>
                            {% endfor %}
                          </select></td>
                        <td><select name="product_subscription[{{ subscription_row }}][customer_group_id]" class="form-select">
                            {% for customer_group in customer_groups %}
                              <option value="{{ customer_group.customer_group_id }}"{% if customer_group.customer_group_id == product_subscription.customer_group_id %} selected{% endif %}>{{ customer_group.name }}</option>
                            {% endfor %}
                          </select></td>
                        <td><input type="text" name="product_subscription[{{ subscription_row }}][trial_price]" value="{{ product_subscription.trial_price }}" placeholder="{{ entry_trial_price }}" class="form-control"/></td>
                        <td><input type="text" name="product_subscription[{{ subscription_row }}][price]" value="{{ product_subscription.price }}" placeholder="{{ entry_price }}" class="form-control"/></td>
                        <td class="text-end"><button type="button" onclick="$('#subscription-row-{{ subscription_row }}').remove()" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                      </tr>
                      {% set subscription_row = subscription_row + 1 %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="4"></td>
                      <td class="text-end"><button type="button" id="button-subscription" data-bs-toggle="tooltip" title="{{ button_subscription_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
            <div id="tab-discount" class="tab-pane">
              <div class="table-responsive">
                <table id="product-discount" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>{{ entry_customer_group }}</th>
                      <th class="text-end">{{ entry_quantity }}</th>
                      <th class="text-end">{{ entry_priority }}</th>
                      <th class="text-end">{{ entry_price }}</th>
                      <th class="text-end">{{ entry_type }}</th>
                      <th class="text-end">{{ entry_special }}</th>
                      <th>{{ entry_date_start }}</th>
                      <th>{{ entry_date_end }}</th>
                      <th class="text-end">{% if master_id %}
                          <x-switch name="override[product_discount]" value="1" checked="{{ override.product_discount }}" input-class="form-switch float-end" data-oc-target="#product-discount"></x-switch>{% endif %}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% set discount_row = 0 %}
                    {% for product_discount in product_discounts %}
                      <tr id="discount-row-{{ discount_row }}">
                        <td><select name="product_discount[{{ discount_row }}][customer_group_id]" class="form-select">
                            {% for customer_group in customer_groups %}
                              <option value="{{ customer_group.customer_group_id }}"{% if customer_group.customer_group_id == product_discount.customer_group_id %} selected{% endif %}>{{ customer_group.name }}</option>
                            {% endfor %}
                          </select></td>
                        <td class="text-end"><input type="text" name="product_discount[{{ discount_row }}][quantity]" value="{{ product_discount.quantity }}" placeholder="{{ entry_quantity }}" class="form-control"/></td>
                        <td class="text-end"><input type="text" name="product_discount[{{ discount_row }}][priority]" value="{{ product_discount.priority }}" placeholder="{{ entry_priority }}" class="form-control"/></td>
                        <td class="text-end"><input type="text" name="product_discount[{{ discount_row }}][price]" value="{{ product_discount.price }}" placeholder="{{ entry_price }}" class="form-control"/></td>
                        <td><select name="product_discount[{{ discount_row }}][type]" class="form-select">
                            <option value="F"{% if product_discount.type == 'F' %} selected{% endif %}>{{ text_fixed }}</option>
                            <option value="S"{% if product_discount.type == 'S' %} selected{% endif %}>{{ text_subtract }}</option>
                            <option value="P"{% if product_discount.type == 'P' %} selected{% endif %}>{{ text_percentage }}</option>
                          </select></td>
                        <td>
                          <x-switch name="product_discount[{{ discount_row }}][special]" value="1" checked="{{ product_discount.special }}" input-class="form-switch form-switch-lg"></x-switch>
                        </td>
                        <td><input type="date" name="product_discount[{{ discount_row }}][date_start]" value="{{ product_discount.date_start }}" placeholder="{{ entry_date_start }}" class="form-control"/></td>
                        <td><input type="date" name="product_discount[{{ discount_row }}][date_end]" value="{{ product_discount.date_end }}" placeholder="{{ entry_date_end }}" class="form-control"/></td>
                        <td class="text-end"><button type="button" onclick="$('#discount-row-{{ discount_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                      </tr>
                      {% set discount_row = discount_row + 1 %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="8"></td>
                      <td class="text-end"><button type="button" id="button-discount" data-bs-toggle="tooltip" title="{{ button_discount_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
            <div id="tab-image" class="tab-pane">
              <fieldset>
                <legend>{{ text_image }}{% if master_id %}
                  <x-switch name="override[image]" value="1" checked="{{ override.image }}" input-class="form-switch float-end" data-oc-target="#image"></x-switch>{% endif %}</legend>
                <div id="image" class="border rounded d-block" style="max-width: 300px;">
                  <img src="{{ thumb }}" alt="" title="" id="thumb-image" data-oc-placeholder="{{ placeholder }}" class="img-fluid"/> <input type="hidden" name="image" value="{{ image }}" id="input-image"/>
                  <div class="d-grid">
                    <button type="button" data-oc-toggle="image" data-oc-target="#input-image" data-oc-thumb="#thumb-image" class="btn btn-primary rounded-0"><i class="fa-solid fa-pencil"></i> {{ button_edit }}</button>
                    <button type="button" data-oc-toggle="clear" data-oc-target="#input-image" data-oc-thumb="#thumb-image" class="btn btn-warning rounded-0"><i class="fa-regular fa-trash-can"></i> {{ button_clear }}</button>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_image_additional }}</legend>
                <div class="table-responsive">
                  <table id="product-image" class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th>{{ entry_image }}</th>
                        <th>{{ entry_sort_order }}</th>
                        <th class="text-end">{% if master_id %}
                            <x-switch name="override[product_image]" value="1" checked="{{ override.product_image }}" input-class="form-switch" data-oc-target="#product-image"></x-switch>{% endif %}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% set image_row = 0 %}
                      {% for product_image in product_images %}
                        <tr id="product-image-row-{{ image_row }}">
                          <td>
                            <div class="border rounded d-block" style="max-width: 300px;">
                              <img src="{{ product_image.thumb }}" alt="" title="" id="product-image-{{ image_row }}" data-oc-placeholder="{{ placeholder }}" class="img-fluid"/> <input type="hidden" name="product_image[{{ image_row }}][image]" value="{{ product_image.image }}" id="input-product-image-{{ image_row }}"/>
                              <div class="d-grid">
                                <button type="button" data-oc-toggle="image" data-oc-target="#input-product-image-{{ image_row }}" data-oc-thumb="#product-image-{{ image_row }}" class="btn btn-primary rounded-0"><i class="fa-solid fa-pencil"></i> {{ button_edit }}</button>
                                <button type="button" data-oc-toggle="clear" data-oc-target="#input-product-image-{{ image_row }}" data-oc-thumb="#product-image-{{ image_row }}" class="btn btn-warning rounded-0"><i class="fa-regular fa-trash-can"></i> {{ button_clear }}</button>
                              </div>
                            </div>
                          </td>
                          <td><input type="text" name="product_image[{{ image_row }}][sort_order]" value="{{ product_image.sort_order }}" placeholder="{{ entry_sort_order }}" class="form-control"/></td>
                          <td class="text-end"><button type="button" onclick="$('#product-image-row-{{ image_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                        </tr>
                        {% set image_row = image_row + 1 %}
                      {% endfor %}
                    </tbody>
                    <tfoot>
                      <tr>
                        <td colspan="2"></td>
                        <td class="text-end"><button type="button" id="button-image" data-bs-toggle="tooltip" title="{{ button_image_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </fieldset>
            </div>

            <div id="tab-reward" class="tab-pane">
              <fieldset>
                <legend>{{ text_reward }}</legend>
                <div class="row mb-3">
                  <label for="input-points" class="col-sm-2 col-form-label">{{ entry_points }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="points" value="{{ points }}" placeholder="{{ entry_points }}" id="input-points" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <x-switch name="override[points]" value="1" checked="{{ override.points }}" input-class="form-switch" data-oc-target="#input-points"></x-switch>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_points }}</div>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_points }}</legend>
                <div class="table-responsive">
                  <table id="product-reward" class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th>{{ entry_customer_group }}</th>
                        <th class="text-end">{{ entry_reward }}&nbsp;&nbsp;{% if master_id %}
                          <x-switch name="override[product_reward]" value="1" checked="{{ override.product_reward }}" input-class="form-switch float-end" data-oc-target="#product-reward"></x-switch>{% endif %}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for customer_group in customer_groups %}
                        <tr>
                          <td>{{ customer_group.name }}</td>
                          <td class="text-end"><input type="text" name="product_reward[{{ customer_group.customer_group_id }}][points]" value="{{ product_reward[customer_group.customer_group_id] ? product_reward[customer_group.customer_group_id].points }}" class="form-control"/></td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </fieldset>
            </div>

            <div id="tab-seo" class="tab-pane">
              <div class="alert alert-info"><i class="fa-solid fa-info-circle"></i> {{ text_keyword }}</div>
              <div id="product-seo" class="table-responsive">
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>{{ entry_store }}</th>
                      <th>{{ entry_keyword }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for store in stores %}
                      <tr>
                        <td>{{ store.name }}</td>
                        <td>
                          {% for language in languages %}
                            <div class="input-group">
                              <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name }}"/></div>
                              <input type="text" name="product_seo_url[{{ store.store_id }}][{{ language.language_id }}]" value="{% if product_seo_url[store.store_id][language.language_id] %}{{ product_seo_url[store.store_id][language.language_id] }}{% endif %}" id="input-keyword-{{ store.store_id }}-{{ language.language_id }}" placeholder="{{ entry_keyword }}" class="form-control"/>
                            </div>
                            <div id="error-keyword-{{ store.store_id }}-{{ language.language_id }}" class="invalid-feedback"></div>
                          {% endfor %}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            <div id="tab-design" class="tab-pane">
              <div class="table-responsive">
                <table id="product-layout" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>{{ entry_store }}</th>
                      <th>{{ entry_layout }}{% if master_id %}
                          <x-switch name="override[product_layout]" value="1" checked="{{ override.product_layout }}" input-class="form-switch float-end" data-oc-target="#product-layout"></x-switch>
                        {% endif %}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for store in stores %}
                      <tr>
                        <td>{{ store.name }}</td>
                        <td><select name="product_layout[{{ store.store_id }}]" class="form-select">
                            <option value=""></option>
                            {% for layout in layouts %}
                              <option value="{{ layout.layout_id }}"{% if product_layout[store.store_id] and product_layout[store.store_id] == layout.layout_id %} selected{% endif %}>{{ layout.name }}</option>
                            {% endfor %}
                          </select></td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            <div id="tab-report" class="tab-pane">
              <fieldset>
                <legend>{{ text_report }}</legend>
                <div id="report">{{ report }}</div>
              </fieldset>
            </div>
          </div>
          <input type="hidden" name="product_id" value="{{ product_id }}" id="input-product-id"/>
        </form>
      </div>
    </div>
  </div>
</div>
<template id="template-attribute">
  <tr id="attribute-row-{{ attribute_row }}">
    <td>
      <input type="text" name="product_attribute[{{ attribute_row }}][name]" value="" placeholder="{{ entry_attribute }}" id="input-attribute-{{ attribute_row }}" data-oc-target="autocomplete-attribute-{{ attribute_row }}" class="form-control" autocomplete="off"/>
      <input type="hidden" name="product_attribute[{{ attribute_row }}][attribute_id]" value="" id="input-attribute-id-{{ attribute_row }}"/>
      <ul id="autocomplete-attribute-{{ attribute_row }}" class="dropdown-menu"></ul>
    </td>
    <td>{% for language in languages %}
        <div class="input-group">
          <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name }}"/></div>
          <textarea name="product_attribute[{{ attribute_row }}][product_attribute_description][{{ language.language_id }}][text]" rows="5" placeholder="{{ entry_text }}" id="input-text-{{ attribute_row }}-{{ language.language_id }}" class="form-control"></textarea>
        </div>
      {% endfor %}</td>
    <td class="text-end"><button type="button" onclick="$('#attribute-row-{{ attribute_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
  </tr>
</template>
<script type="text/javascript" src="view/javascript/product.js"></script>
{{ footer }}
